
<template>
  <mu-paper :z-depth="1" class="lan-loadmore-body">
    <mu-appbar color="primary" class="lan-header">
      <mu-button icon slot="left" v-close>
        <i class="iconfont angle-left iconangle-left"></i>
        <span class="lan-header-back">返回</span>
      </mu-button>提交成功
      <mu-button icon slot="right" >
        <!-- <mu-icon value="more"></mu-icon> -->
        <!-- <i class="iconfont iconshaixuan4"></i> -->
      </mu-button>
    </mu-appbar>
    
    <mu-container ref="container" class="lan-loadmore-content" style="padding-top:0;">
        <successTips :text="'检查任务提交成功'"></successTips>
        <!-- 这里是业务结构 -->
        <div class="lan-border-line" v-if="data && data.length"></div>
        <mu-paper
          class="lan-card no-padding"
          :z-depth="1"
          v-for="(item,index) in data"
          :key="index"
        >
          <div class="lan-card-header">
            <div class="flex_b">
              <div class="lan-btn circle danger" v-if="item.problemLevel == 3">
                重大
              </div>
              <div class="lan-btn circle default" v-if="item.problemLevel == 1">
                一般
              </div>
              <div class="lan-btn circle warning" v-if="item.problemLevel == 2">
                较大
              </div>
              <div class="lan-btn circle success" v-if="!item.problemLevel">
                无问题
              </div>
              
            </div>
            <div>
              <div class="lan-btn no-bg warning" v-if="item.status == '0'">
                整改中
              </div>
              <div class="lan-btn no-bg warning" v-if="item.status == 1">
                待复查
              </div>
              <div class="lan-btn no-bg success" v-if="item.status == 2">
                已整改
              </div>
            </div>
          </div>
          
          <div class="lan-card-body no-bottom-padding">
            <div class="lan-detail">
              <span class="lan-detail-h">检查部位：</span>
              <span class="lan-detail-r">{{item.checkParts}}</span>
            </div>
            <div class="lan-detail">
              <span class="lan-detail-h">问题描述：</span>
              <span class="lan-detail-r">{{item.problemDescription}}</span>
            </div>
            <div class="lan-detail">
              <span class="lan-detail-h">检查人：</span>
              <span class="lan-detail-r">{{item.checkName}}</span>
            </div>
            <div class="lan-detail">
              <span class="lan-detail-h">整改期限：</span>
              <span class="lan-detail-r">{{handate(item.days)}}</span>
            </div>
          </div> 
          <!-- 没有模板暂时不做 -->
          <div  class="lan-card-footer" @click="goTips(item)" v-power="'checkWorkToTips'" >
            <div class="lan-btn big default has-border" >
                生成整改通知单
            </div>
          </div>
        </mu-paper>
    </mu-container>
    
   
   
  </mu-paper>
</template>

<script>
export default {
  name: "list",
  components: {
    
  },
  data() {
    return {
      data:[]
    };
  },
  beforeDestroy(){
    sessionStorage.removeItem('scuesscheckList')
  },
  async created() {
    this.data = JSON.parse(sessionStorage.getItem('scuesscheckList') || null)
    if(!this.data){
      this.$router.back();
    }
  },
  methods: {
    handate(days){
      let now = new Date().getTime() + (days || '0')*24*60*60*1000;
      return new Date(now).toLocaleDateString().replace(/\//g,'-')
    },
    goTips(item){
      this.$router.push({
        path: '/Totips',
        query: {
          problemId: item.id
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.img-box {
  img {
    width: 80px;
    height: 80px;
    float: left;
    margin: 5px 8px;
  }
}
.lan-form-title {
  line-height: 40px;
}
.lan-border-line{
  height:0.12rem;
  width:100%;
  box-sizing:border-box;
  border:0.04rem solid #AAAAAA;
  background-color:#464646;
  -border-bottom:0.04rem solid #fff;
  margin-bottom:-0.03rem;
}
</style>
